<template>
  <el-form inline>
    <el-form-item label="订单ID"  >
      <el-input v-model="search.id" placeholder="请输入搜索的订单ID" clearable size="large" @change="searchChange"/>
    </el-form-item>
    <el-form-item label="订单流水号"  >
      <el-input v-model="search.code" placeholder="请输入搜索的订单流水号" clearable size="large" @change="searchChange"/>
    </el-form-item>
    <el-form-item label="订单状态" >
      <el-input v-model="search.status" placeholder="请输入搜索的订单状态" clearable size="large" @change="searchChange"/>
    </el-form-item>
  </el-form>

  <el-buttton-group size="large">
    <el-button type="primary" :icon="Delete" @click="delSelect">删除全部</el-button>
  </el-buttton-group>


  <el-table
      ref="tableRef"
      :data="tableData"
      border size="large"
      show-overflow-tooltip
      highlight-current-row
      tooltip-effect="dark"
      @sort-change="onSortChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="id" label="订单ID" width="80" sortable fixed/>
    <el-table-column prop="code" label="订单流水号" width="180"/>
    <el-table-column prop="paymentType" label="订单支付类型" width="180">
      <template #default="scope">
        <span>
          {{ paymentTypeText(scope.row.paymentType) }}
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="comment" label="订单物品描述" width="200"/>
    <el-table-column prop="itemValue" label="物品估值" width="200"/>
    <el-table-column prop="status" label="订单状态" width="180">
      <template #default="scope">
        <span :class="`status-text-${scope.row.status}`">
            {{ scope.row.status === 0 ? '未完成' : '完成' }}
        </span>
      </template>
    </el-table-column>
    <el-table-column align="center">
      <template #header #title>
        删除或修改球鞋信息
      </template>
      <template #default="scope">
        <el-button-group size="large">

          <el-button type="primary" :icon="Edit"  style="background-color: #95d475;border: 0" @click="editRow(scope)"/>
          <el-button type="primary" :icon="Delete" style="background-color:  #fab6b6; border: 0" @click="delRole(scope)"/>
        </el-button-group>
      </template>
    </el-table-column>

  </el-table>
  <el-pagination
      :total="paginationData.total"
      layout="sizes, prev, pager, next, jumper, ->, total, slot"
      :page-size="[2, 5, 10, 20, 30, 40, 50]"
      :default-page-size="paginationData.pageSize"
      @change="paginationChange"
  />


  <PlusAndEditForm :form-data="plusAndEditFormData" :title="plusAndEditTitle"/>
</template>

<script setup>
import {reactive} from "vue";
import {page} from "../../../apis/order"
import {onMounted} from "vue";
import {ref} from "vue";
import {del} from "../../../apis/order"
import {delBatch} from "../../../apis/order";
import PlusAndEditForm from "../../manager/Order/PlusAndEditForm.vue"
import {provide} from "vue";
import {watch} from "vue";


import {defineProps} from "vue";
import {
  ArrowLeft,
  ArrowRight,
  Delete,
  Edit,
  Share,
  Plus
} from '@element-plus/icons-vue'
import {ElMessageBox} from "element-plus";

const tableData =ref([
])

const paginationData =  reactive({
  total:0,
  currentPage:1,
  pageSize:10
})

const paginationChange=(currentPage,pageSize)=>{
  console.log(currentPage,pageSize)
  paginationData.currentPage=currentPage
  paginationData.pageSize=pageSize
  getPage()
}
//表单搜索条件
const search =reactive({
  id:'',
  code:'',
  status:''
})

//
// const filters =reactive({
//   gender:null,
//
// })


const orders=ref([])
//排序
const onSortChange=({column,order})=>{
  console.log(column,order)

  if(order){

    orders.value[0]=
        {
          column: column.property,
          isAsc: order == 'ascending'
        }
  }else {
    orders.value.length=0
  }
  getPage();


}


//搜索字段内容改变促发事件
const searchChange=()=>{
  getPage()
}

// 调用API加载后端的分页数据
const getPage = ()=>{
  page(paginationData.currentPage,paginationData.pageSize,
      {
        search,
        orders: orders.value
        // filters
      }).then((result)=>{
    console.log(result)
    tableData.value=result.data.records
    paginationData.total =result.data.total
  })

}

/**
 *
 * @param scope
 */




const delRole = (scope) =>{
  ElMessageBox.confirm('删除数据口无法恢复，您确认删除吗？','确认删除',{type:"warning"}).then( res =>{
    del(scope.row.id).then(result=>{
      getPage()
    })
  }).catch(() => {})

}

//获取表格对象的应用
const tableRef=ref()

const delSelect =() =>{
  ElMessageBox.confirm('删除数据口无法恢复，您确认删除吗？','确认删除',{type:"warning"}).then( res =>{
    const rows= tableRef.value.getSelectionRows()
    delBatch(rows.map(row=> row.id)).then(()=>{
      getPage()
    })
  }).catch(() => {

  })
  // const rows= tableRef.value.getSelectionRows()
  // delBatch(rows.map(row=> row.id)).then(()=>{
  //   getPage()
  // })
}

/**
 * 添加或者修改是否显示
 * @type {Ref<UnwrapRef<boolean>>}
 */

const plusAndEditFormVisible = ref(false)
//向子组件中传入值
provide('dialogVisible',plusAndEditFormVisible)
/**
 *
 *添加修改表单数据
 */
const plusAndEditFormData = ref({})

/**
 *添加修改表单标题
 */
const plusAndEditTitle = ref('')

const plusAndEditSuccess = ref(false)
provide('isSuccess',plusAndEditSuccess)

const editRow =(scope) =>{
  plusAndEditTitle.value='修改'
  Object.assign(plusAndEditFormData.value,scope.row)
  plusAndEditFormVisible.value= true
  plusAndEditSuccess.value=false
}

// 使用<script setup>语法糖
const paymentTypeText = (paymentType) => {
  switch (paymentType) {
    case 0:
      return '信用卡支付';
    case 1:
      return '微信支付';
    case 2:
      return '支付宝支付';
    default:
      return '未知支付方式';
  }
};



/**
 * 增加一行参数
 */
//生命周期，页面渲染完毕加载
onMounted(()=>{
  getPage()
})

watch(plusAndEditSuccess,()=>{
  getPage()
})

</script>

<style scoped>
.el-table{
  height: calc(100vh - 230px );
}


.el-form{
  display: flex;
}

.el-form-item{
  margin-right: 150px;
  margin-top: 10px;
}

.status-text-0,
.status-text-1 {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中，如果需要的话 */
  height: 100%; /* 确保span元素充满整个单元格的高度 */
}
</style>